{% extends 'base.html' %}
{% block js %}
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
	// ajax-based filtering
	function append_info(){
		$('a.item_view').each(function(){
			var item_id = this.dataset['id'];
			var item_url = this.dataset['url'];
			$(this).after('<div class="item-info-wrapper"><div class="item_info" style="display: none;" data-id="'+item_id+'"></div>\
			<div class="edit_delete_buttons">\
			<button class="edit-button" data-id="'+item_id+'">Редактировать</button>\
			<button class="delete-button" data-id="'+item_id+'">Удалить</button></div></div>');
			$.ajax({
				url: item_url+"view/",
				success: function(data, textStatus, xhttpresponse){
					$('div.item_info[data-id="'+item_id+'"]').html('');
					$('div.item_info[data-id="'+item_id+'"]').html(data).slideDown();
					$('button.edit-button[data-id="'+item_id+'"]').button();
					$('button.edit-button[data-id="'+item_id+'"]').click(function(){
						var edit_url = item_url+"edit/";
						var edit_dialog = $('<div style="display:none;"></div>').appendTo('body');
						edit_dialog.load(
							edit_url,
							function(responseText, textStatus, XMLHttpRequest){
								edit_dialog.dialog({
									modal: true,
									width: 420,
									//close: function(){
									//	edit_dialog.remove();
									//}
								});
							}
						);
					});
					$('button.delete-button[data-id="'+item_id+'"]').button();
					$('button.delete-button[data-id="'+item_id+'"]').click(function(){
						var delete_url = item_url+"delete/";
						var delete_dialog = $('<div style="display:none;"></div>').appendTo('body');
						delete_dialog.load(
							edit_url,
							function(responseText, textStatus, XMLHttpRequest){
								delete_dialog.dialog({
									modal: true,
									close: function(){
										delete_dialog.remove();
									}
								});
							}
						);
					});
				}
			});
		});
	}
	$(document).ready(function(){
		append_info();
		$('.verified_options').change(function(){
			var vfd = $('.verified_options option:selected').attr('value');
			$.ajax({
				url: "/dbsupply/{{model}}/ajax/"+vfd+"/",
				success: function(data){
					$('.item_list').html(data);
					append_info()
					},
				404: function(){output='There seem to be error';}
			});
			append_info();
		});
	});
</script>
{% endblock %}
{% block content %}
<h1>{{ header }}</h1>

<div class="item_list_options">
	<select class="verified_options">
		<option value="all" selected="selected">Все</option>
		<option value="verified">Проверенные</option>
		<option value="unverified">Непроверенные</option>
	</select>
</div>
<div class="item_list">
	{% if items %}
	<ul>
		{% for item in items %}
			<li>{{item.id}}. <a class="item_view" href="#" data-url="/dbsupply/{{model}}/ajax/{{item.id}}/" data-id="{{item.id}}">{{ item.spelling }}</a></li>
		{% endfor %}
	</ul>
	{% else %}
		<h1>К сожалению в настоящий момент в базе данных ничего нет :(. В ближайшее время это будет исправлено.</h1>
	{% endif %}
</div>

{% endblock %}
